<template>
  <div class="pf-login">
    <div class="pf-login-version">
      <span>beta-0.1</span>
    </div>
    <div class="pf-login-form pf-flex pf-flex-column">
      <h1>Pf Auth</h1>
      <pf-form ref="formDom" :col-count="1" :config="formConfig" :model="formData">
        <template v-slot:verifyCode>
          <canvas
            ref="verifyCodeDom"
            @click="verifyCode"
            width="100"
            height="28"
            style="cursor: pointer"
          ></canvas>
        </template>
      </pf-form>
      <el-button @click="login" class="pf-login-btn" type="primary">登录</el-button>
    </div>
    <form style="display: none; /*display: flex;flex-direction: column*/" id="_formDom">
      <input class="username" link type="primary" name="username" />
      <input class="password" type="password" name="password" />
      <input class="verifyCode" link type="primary" name="verifyCode" />
      <input class="loginType" name="loginType" />
      <input class="rememberMe" name="rememberMe" />
    </form>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, Ref, ref } from 'vue';
import { useRoute } from 'vue-router';
import { FormModel, useAuth, useData, useHttpClient } from 'pf-component';
import { loginForm } from '@/constants/data/form';
import { draw } from '@/constants/util/verify-code';

export default defineComponent({
  name: 'Login',
  setup() {
    const logining = ref(false);
    const route = useRoute();
    const formConfig: Ref<FormModel> = ref(loginForm());
    const formDom = ref(null);
    const verifyCodeDom = ref(null);
    const formData: Ref = ref(useData().toFormValue(formConfig.value));
    onMounted(() => {
      verifyCode();
    });
    const verifyCode = () => {
      draw(verifyCodeDom.value);
    };
    const login = () => {
      (formDom.value as any).validate((val: boolean) => {
        if (val) {
          doLogin();
        }
      });
    };
    const doLogin = () => {
      const loginForm: HTMLFormElement = document.getElementById('_formDom') as any;
      const username = loginForm.getElementsByClassName('username').item(0) as any;
      const password = loginForm.getElementsByClassName('password').item(0) as any;
      const verifyCode = loginForm.getElementsByClassName('verifyCode').item(0) as any;
      const loginType = loginForm.getElementsByClassName('loginType').item(0) as any;
      const rememberMe = loginForm.getElementsByClassName('rememberMe').item(0) as any;

      if (username) username.value = formData.value.username;
      if (password) password.value = formData.value.password;
      if (verifyCode) verifyCode.value = formData.value.verifyCode;
      if (loginType) loginType.value = formData.value.loginType;
      if (rememberMe)
        rememberMe.value = formData.value.rememberMe && formData.value.rememberMe.length > 0;

      loginForm.action = '/pf-auth/login';
      loginForm.method = 'post';
      loginForm.submit();
      // loginForm.onsubmit = (b: Event) => {
      //   console.log(formData, b, "aaaaaaaaaaa");
      //   return false as any;
      // };
    };
    return {
      logining,
      formData,
      formConfig,
      formDom,
      verifyCodeDom,
      login,
      verifyCode
    };
  }
});
</script>

<style scoped lang="scss">
:deep(.el-input-group__append) {
  padding: 0;
  border: 0;
}
.#{$prefix} {
  &-login {
    background: url('./assets/images/login/login.jpg');
    height: 100vh;
    background-repeat: round;
    &-version {
      position: relative;
      text-align: center;
      top: 95%;
    }
    &-form {
      width: 300px;
      position: relative;
      top: 15%;
      left: 60%;
    }
    &-btn {
      width: calc(100% - 30px);
    }
  }
}
</style>
